<template>
  <view class="container">
    <view class="header">
        <view class="title">{{title}}</view>
      <view class="add-btn" @click="createAddress">新建</view>
    </view>
    <view class="address-item" v-for="(item, index) in addressList" :key="index">
      <view class="user-info">
        <view class="name">{{item.name}}</view>
        <view class="phone">{{item.phone}}</view>
      </view>
      <view style="display:flex; justify-content:space-between">
        <view class="address">{{item.department}}</view>
        <view style="display:flex; justify-content:space-between">
           <view class="edit-btn" @click="editAddress(index)">
            <image src="/static/icon/编写.png" style="width:30rpx;height:30rpx;"></image>
            </view>
            <view class="edit-btn" @click="delAddress(index)">
                <image src="/static/icon/删除.png" style="width:30px;height:30px;"></image>
            </view> 
        </view>
      
      </view>
      
    </view>
  </view>
</template>

<script>
	import  config  from '@/config'
export default {
  data() {
    return {
        title:'管理收货地址',
        addressList: []
    };
  },
  onShow() {
    this.updatePage();
  },
  methods: {
    createAddress() {
      // 跳转到新建地址页面逻辑
      uni.navigateTo({
        url: '/pages/address/add_address'
      });
    },
    updatePage() {
      console.log(1);
      uni.request({
        url: config.API_HOST+'/adress',
        success: (res) => {
          this.addressList = res.data;
          console.log(res.data);
        },
        fail: (err) => {
          console.error('请求地址数据失败:', err);
          uni.showToast({
            title: '请求地址数据失败',
            icon: 'none'
          });
        }
      });
    },
    editAddress(index) {
      // 跳转到编辑地址页面逻辑，携带地址信息
      const addressId = this.addressList[index].id;
      uni.navigateTo({
        url: `/pages/address/add_address?id=${addressId}`
      });
    },
    delAddress(index) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该地址吗？',
        success: (res) => {
          if (res.confirm) {
            const addressId = this.addressList[index].id;
            uni.request({
              url: config.API_HOST+`/adress/${addressId}`,
              method: 'DELETE',
              success: (res) => {
                if (res.statusCode === 200) {
                  uni.showToast({
                    title: '删除成功',
                    icon:'success'
                  });
                  this.updatePage();
                } else {
                  uni.showToast({
                    title: '删除失败',
                    icon: 'none'
                  });
                  console.error('删除地址失败:', res.data);
                }
              },
              fail: (err) => {
                console.error('请求删除地址失败:', err);
                uni.showToast({
                  title: '请求删除地址失败',
                  icon: 'none'
                });
              }
            });
          }
        }
      });
    }
  }
};
</script>

<style>
.container {
  padding: 10px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.title {
  font-size: 20px;
  font-weight: bold;
}
.add-btn {
  font-size: 16px;
  color: #007AFF;
}
.address-item {
  border: 1px solid #E5E5E5;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}
.user-info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 5px;
}
.name {
  font-size: 16px;
  margin-right:30px ;
}
.phone {
  font-size: 14px;
  color: #999;
}
.address {
  font-size: 16px;
}
.edit-btn {
  width: 30px;
  height: 30px;
}
</style>